/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed;">
      <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @tap="goBack"></a>-->
      <h1 class="mui-title">{{language.PaymentStatus}}</h1>
    </header>
    <div class="mui-content" v-show="isShow" style="padding-top: 70px;" >
      <div style="text-align: center; width: 90%; margin-left: 5%;">
        <div style="min-height:100px" >
        <div v-if="payData.payStatus=='1'">
          <div class="PaymentSuccess"></div>
          <div class="PaymentStatus">{{language.PaymentSucceeded}} {{payData.orderAmount}} {{payData.currency}}</div>
        </div>
        <div v-else>
            <div class="PaymentFail"></div>
            <div class="PaymentStatus">{{language.PaymentFailed}} {{payData.orderAmount}} {{payData.currency}}</div>
        </div>
          </div>
        <div class='pay mg24'>
          <div class="left">{{language.Product}}</div>
          <div class="right" v-text="payData.productName"></div>
        </div>
        <div class='pay'>
          <div class="left">{{language.PaymentTime}}</div>
          <div class="right" v-text="PaymentTime"></div>
        </div>
        <div class='pay'>
          <div class="left">{{language.PaymentMethod}}</div>
          <div class="right" v-text="payData.payChannelName"></div>
        </div>
        <div class='pay'>
          <div class="left">{{language.Order}}</div>
          <div class="right" v-text="payData.orderNo"></div>
        </div>
      </div>
      <!--<div class="red" v-html="tip"></div>-->
      <!--<button type="button" id='buttons' class="mui-btn mui-btn-SingIn" @tap="registerFn()">Back to User Center</button>-->
    </div>
  </div>
</template>
<script>
  import store from '../login-store';
  import {tools} from 'tools';
  var lan = require('./../language.json');
  import {FastClick} from 'fastclick';
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        currentHeader: {
          title: 'Payment Status'
        },
        payData: {
          payStatus: '2',
          productName: '0',
          payChannelName: '',
          orderAmount: '0',
          orderNo: '0',
          payTime: '0',
          currency: '0'
        },
        isShow: false,
        language: lan[window.lan],
        login: store.state,
        r: tools.getQueryString('order_number') || tools.getQueryString('orderNo')
      };
    },
    methods: {
      goBack: function () {
        history.go(-1);
      },
      registerFn: function () {}
    },
    //  created 钩子在实例创建后,在reday之前调用
    created: function () {
      document.querySelector('head title').textContent = this.language.PaymentStatus;
    },
    route: {
      data: function (data) {
        var self = this;
        self.isShow = false;
        if (self.r) {
        tools.show(this.language.load);
        store.getPayMent(self.r, value => {
          if (value.trxStatus && value.trxStatus > '-1') {
            self.isShow = true;
            tools.hide();
            self.payData = value;
          } else {
            var fid = setInterval(function () {
              store.getPayMent(self.r, value => {
                if (value.trxStatus && value.trxStatus > '-1') {
                  self.isShow = true;
                  tools.hide();
                  window.clearInterval(fid);
                };
                self.payData = value;
              });
            }, 3000);
            setTimeout(function () {
              tools.hide();
              tools.msgShow(self.language.Fail);
              window.clearInterval(fid);
            }, 600000);
          };
        });
        } else {
          tools.msgShow(self.language.Failedorder, 4000);
        }
      }
    },
    computed: {
      PaymentTime: function () {
        return tools.tranferTime(this.payData.payTime);
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
      FastClick.attach(document.body);
    }
  };
</script>
